<template>
  <div>
    <van-tabs animated @click='change'>
      <van-tab class='time' v-for='(item,index) in seckillIndexList' :key='index' :title=item.time>
        <div class='result'>
          <span><van-icon name='fire-o' />{{ item.state }}</span>
        </div>
        <div v-if='seckillStatus'>
          <van-card v-for='(item1,index1) in seckillList' :key='index1'
                    :num="item1.num + '/' + item1.unitName"
                    :origin-price=item1.otPrice
                    :price=item1.price
                    :desc=item1.title
                    :title=item1.info
                    :thumb=item1.image
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import { getSeckillIndex, getSeckillList } from '@/api/scekill.js'

export default {
  data() {
    return {
      seckillIndexList: [],
      isStart: false,
      seckillStatus: 0,
      seckillList: []
    }
  },
  methods: {
    seckillIndex() {
      getSeckillIndex().then(res => {
        this.seckillIndexList = res.data.seckillTime
      })
    },
    change(index, title) {
      getSeckillIndex().then(res => {
        this.seckillStatus = res.data.seckillTime[index].status
        if (this.seckillStatus != 1) {
          this.$toast(title + '场未开始或者已经结束了哦～')
        }
      })
      getSeckillList(this.seckillIndexList[index].id).then(res => {
        this.seckillList = res.data
      })
    }

  },
  created() {
    this.seckillIndex()
  }
}
</script>

<style scoped>
.result {
  margin-top: 20px;
  width: 90%;
  height: 95px;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 1px 13px hsl(0deg 0% 72% / 10%);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  font-size: 20px;
  color: #bf202d;
  margin-left: 5%;
}
</style>
